import React,{Component} from 'react';
import 'antd/dist/antd.css'; 
import { Table,Button,Modal,Input,Select,Rate,DatePicker    } from 'antd';
import request from './util/request'
import moment from 'moment'
const { Option } = Select;




class App extends Component{
    state = {
        count:2,    //每页的条数
        pagenum:1,   //页码
        list:[],      //数据
        total:0,       //总条数
        visible: false, //控制弹窗显示隐藏
        title:'',       //标题
        author:'lixd',  //作者
        num:123,        //阅读数
        status:'',      //状态
        important:'',    //重要性
        time:'',         //时间
        id:''           //编辑的id
    }
    componentDidMount(){
         this.getList();
    }

    

    getList = () => {
        let {pagenum,count} = this.state;
        let start = (pagenum-1)*count;
        request.get('/api/booklist',{start,count}).then(res => {
            console.log(res);
            if(res.code === 1){
                this.setState({
                    list:res.data,
                    total:res.total
                })
            }
        }) 
    }
    render(){
        let {list,count,total,title,time,status,important} = this.state;
        const columns = [
            {
              title: '时间',
              dataIndex: 'create_time',
            },
            {
              title: '标题',
              dataIndex: 'title',
            },
            {
              title: '作者',
              dataIndex: 'author',
            },
            {
                title:'重要性',
                render:(obj) => <Rate count={obj.important*1} onChange={this.choose} />
            },
            {
                title:'阅读数',
                dataIndex: 'num',
            },
            {
                title:'状态',
                dataIndex: 'status',
            },
            {
                title:'操作',
                render:(obj) => <div>
                    <Button onClick={() => this.edit(obj)}>编辑</Button>
                    <Button onClick={() => this.del(obj.id)}>删除</Button>
                </div>
            }
        ];
        return (
            <div className="App">
                <Button onClick={this.showModal}>添加</Button>
                <Table columns={columns} rowKey="id" dataSource={list} size="small"

                    pagination={
                        {
                            pageSize:count,
                            total,
                            onChange:this.change
                        }
                    }
                
                />
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    时间：<DatePicker onChange={this.chooseTime} value={moment(time,'YYYY-MM-DD')} />
                    标题：<Input value={title} placeholder="标题" onChange={this.changeTitle}></Input><br></br>
                    状态：<Select
                        style={{ width: 200 }}
                        placeholder="选择状态"
                        onChange = {
                            this.changeStaus
                        }
                        value = {status}
                    >
                        <Option value="draft">draft</Option>
                        <Option value="publish">publish</Option>
                    </Select><br></br>
                    重要性：<Rate value={important*1} count={3} onChange={this.choose} />
                </Modal>
            </div>
          );
    }

    //删除
    del = (id) => {
        request.get('/api/del',{id}).then(res => {
            if(res.code === 1){
                this.getList();
            }
        })
    }

    //编辑
    edit = (obj) => {
        let {title,author,num,status,important,create_time,id} = obj;
        console.log(obj)
        this.setState({
            title,
            author,
            num,
            status,
            important,
            time:create_time,
            visible:true,
            id
        })
    }

    //修改标题
    changeTitle = (e) => {
        this.setState({
            title:e.target.value
        })   
    }

    //状态
    changeStaus = (value) => {
        this.setState({
            status:value
        })
    }

    //时间
    chooseTime = (time,dateString) => {
        console.log(time,dateString)
        this.setState({
            time:dateString
        })
    }

    //选择星星
    choose = (num) => {
        console.log(num)
        this.setState({
            important:num
        })
    }

    change = (page) =>{
        this.setState({
            pagenum:page
        },() => {
            this.getList();
        })
        
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        let {title,author,num,status,important,time,id} = this.state;
        let url = '/api/put';//添加
        if(id){
            url = '/api/update';//编辑
        }
        request.post(url,{title,author,num,status,important,time,id}).then(res => {
            if(res.code === 1){
                this.setState({
                    visible: false,
                });
                this.reset();
                this.getList();
            }
        })
    };

    reset = () => {
        this.setState({
            title:'',
            author:'',
            num:'',
            status:'',
            important:'',
            time:'',
            id:''
        })
    }

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
        this.reset();
    };
}

export default App;
